<template>
    <div>
        <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>用户管理</el-breadcrumb-item>
  <el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb>
<el-card class="box-card">
<!-- 输入框 -->
  <el-row :gutter="10">
      <el-col :span="8">
    <div>
  <el-input placeholder="请输入内容" v-model="queryInfo.query" class="input-with-select"
  @click="getUserList" clearable>
    <el-button slot="append" icon="el-icon-search"  ></el-button>
  </el-input>
</div>
</el-col>
      <el-col :span="4">
          <el-button type="primary" @click="dialogVisible = true">添加用户</el-button>
    </el-col>
  </el-row>
    <!-- 表格区域 -->
    <template>

    <el-table :data="tableData" style="width: 100%" border stripe>
        <el-table-column type="index"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="邮箱"> </el-table-column>
      <el-table-column  prop="phon" label="电话"> </el-table-column>
      <el-table-column  prop="sex" label="角色"> </el-table-column>
       <el-table-column  label="状态" prop="mg_state">
           <!-- <template slot-scope="scope"> -->
                <template v-slot="scope"><!-- 插槽新版以更新的使用方法 -->

           <el-switch v-model="scope.row.mg_state" active-color="#13ce66" inactive-color="#ff4949">
</el-switch>
           </template>

            </el-table-column >
        <el-table-column label="操作"> 
   <template slot-scope="scope">
<!-- 修改按钮 -->
<el-button type="primary" icon="el-icon-edit" size="mini" @click="showDialogVisible(scope.row.address)"> </el-button>
<!-- 删除 -->
<el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
<!-- 分配角色 -->
<el-tooltip class="item" effect="dark" content="分配角色" placement="top">
      <el-button type="danger" icon="el-icon-setting" size="mini"></el-button>
    </el-tooltip>
           </template>
        </el-table-column>
    </el-table>
  </template>
 <!-- 分页组件 -->
 <div class="block">
    <span class="demonstration">完整功能</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>


</el-card>
 <!-- 对话框 -->

  <!-- 头部区域 -->
<el-dialog
  title="添加用户"
  :visible.sync="dialogVisible"
  width="50%"
  @close="addDialogClosed"
  
  >
  <!-- 主题区域 -->
 <el-form :model="ruleForm" :rules="rules" 
         ref="ruleForm" label-width="70px" :data="tableData">
 <el-form-item label="用户名" prop="name">   <!-- prop接受数据校验规则 -->
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
   <el-form-item label="邮箱" prop="address">
    <el-input v-model="ruleForm.address"></el-input>
  </el-form-item>
   <el-form-item label="电话" prop="phon">
    <el-input v-model="ruleForm.phon"></el-input>
  </el-form-item>
   <el-form-item label="角色" prop="sex">
    <el-input v-model="ruleForm.sex"></el-input>
  </el-form-item>
 </el-form>


  <span slot="footer" class="dialog-footer">
    <!-- 底部区域 -->
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addUser">确 定</el-button>
  </span>
</el-dialog>

<!-- 修改用户对话框 -->

<el-dialog
  title="提示"
  :visible.sync="dialogVisibletow"
  width="50%"
  :before-close="handleClose">
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibletow = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisibletow = false">确 定</el-button>
  </span>
</el-dialog>
    </div>
</template>
<script>
export default {
 data() {
   //自定义校验规则 验真有邮箱规则 用箭头函数
   //()里面有三个参数第一个检验规则 第二个为校验值 第三个为校验成功的回调函数
   var checkEmail=(rule,value,cb)=>{
     //验真邮箱的正则表达式
     const regEmail=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/

     if(regEmail.test(value)){
       return cb()
     }
     cb(new Error('请输入正确的邮箱格式'))
   }

   //验真手机号

 


var checkMobail=(rule,value,cb)=>{
     //验真邮箱的正则表达式
     const regmobile=/(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/

     if(regEmail.test(value)){
       return cb()
     }
     cb(new Error('请输入正确的邮箱格式'))
   }

   
        return {
          tableData: [{
            id:1,
            name: '张俊',
            address: '2333555@qq.com',
            phon:1111111111,
            sex:'男',
            mg_state:true,
          },
           {
             id:2,
            name: '张静文',
            address: '2763452@qq.com',
            phon:1111111111,
            sex:'男',
            mg_state:false,
          },
          {
            id:3,
            name: '张潘',
            address: '2763452@qq.com',
            phon:1111111111,
            sex:'男',
            mg_state:false,
          },
            {
            id:4,
            name: '喻鹏程',
            address: '2763452@qq.com',
            phon:1111111111,
            sex:'男',
            mg_state:false,
          },
           {
            id:5,
            name: '王科',
            address: '2763452@qq.com',
            phon:1111111111,
            sex:'男',
            mg_state:false,
          }
          ],
          eidtform:{},
       queryInfo:{
           //当前显示的页数
           query:'',
          pagenum:1,
          //当前页数显示多少条数据
          pagesize:2
       },
       total:4,
       dialogVisible:false,
        dialogVisibletow:false,
       //添加用户表单数据
       ruleForm:{
         name:'',
         address:'',
         phon:'',
        sex:''
       }, 
       //添加表单验证
       rules:{
         name:[
         { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
         ],
         address:[
         { required: true, message: "请输入邮箱", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 200 个字符", trigger: "blur" },
           {validator:checkEmail,trigger:'blur'}
         ],
            phon:[
         { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
         ], 
        sex:[
         { required: true, message: "请输入手机", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
           {validator:checkMobail,trigger:'blur'}
         
         ]
       }
        }
      },
      methods:{
          //监听pagesize改变的事件
          handleSizeChange(newSize){
              this.queryInfo.pagesize=newSize
              
          },
       handleCurrentChange(newPage){
           this.queryInfo.pagenum=newPage
           this.getUserlist()
       },
       getUserList(){
         alert('用户数据更新成功')
       },
       addDialogClosed(){
           this.$refs.ruleForm.resetFields()
       },
       //点击按钮添加新用户
       addUser(){
     
   //tableData
   this.tableData.push({"name":this.ruleForm.name,
                         "address":this.ruleForm.address,
                          "phon":this.ruleForm.phon,
                           "sex":this.ruleForm.sex,  
                         }
                         
                         )

       },
       showDialogVisible(address){
        this.dialogVisibletow=true
        var data=this.ruleForm;
    alert(address)
      },
      removeUserById(id){
      this.tableData.splice(id-1,1)
      if(this.tableData.length===1){
        alert("不能删完哦");
      }
      }
      
      }
    }
</script>
<style scoped>

</style>